<template>
	<view class="myApply">
		<view class="check-view-box">
			<view class="roc-btn">
				<text @click="switchList()">切换</text>
			</view>
		</view>
		<view v-show="isCar">
			<view v-if="applyList.length> 0">
				<u-swipe-action>
					<view class="myApplyBox" v-for="item in applyList" :key="item.id">
						<u-swipe-action-item :options="item.options" :autoClose="true" @click="swipeClick(item)"
							:show="true">
							<view @click="detail(item)">
								<u-row style="padding-top: 30rpx;">
									<u-col span="9">
										<view class="name">{{item.flow_type_val}}</view>
									</u-col>
									<u-col span="3">
										<view class="status">
											<u-tag v-if="item.flow_status === 99" text="作废" type="error" shape="circle"
												size="mini"></u-tag>
											<u-tag v-else :text="statusList[item.flow_status]" size="mini"
												:type="typeList[item.flow_status]" shape="circle">
											</u-tag>
										</view>
									</u-col>
								</u-row>
								<u-row>
									<u-col span="6">
										<view class="type">类型：{{item.flow_id_val}}</view>
									</u-col>
									<u-col span="6">
										<view class="person">发起人：{{item.worker_id_val}}</view>
									</u-col>
								</u-row>
								<u-row style="padding-bottom: 25rpx;">
									<u-col span="12">
										<view class="time">发起时间：{{item.submit_time}}</view>
									</u-col>
								</u-row>
							</view>
						</u-swipe-action-item>
					</view>
				</u-swipe-action>
			</view>
			<view style="text-align: center;padding-bottom: 50px;" v-else>
				<image src="../../static/img/nullData.png" style="width: 160px;height: 160px;"></image>
				<view class="">
					暂无数据
				</view>
			</view>
		</view>
		<view class="" v-show="!isCar" style="margin-top: 10px;">
			<publicTabel ref="data" />
		</view>
		<u-toast ref="uToast" />
		<view style="margin-top: 20rpx;">
			<page-pagination :total="total" :pageSize="fqForm.page_size" :currentPage="fqForm.page" @change="changePage"
				mode="simple" :showAround="true"></page-pagination>
		</view>
	</view>
</template>

<script>
	import {
		getApply,
		updataApply
	} from "../../api/flow.js"
	import publicTabel from '@/components/publicTabel.vue'
	export default {
		components: {
			publicTabel
		},
		data() {
			return {
				fqForm: {
					page: 1,
					page_size: 6,
					worker_id: uni.getStorageSync("userId"),
				},
				applyList: [],
				statusList: ['未提交', '已提交', '审核中', '审核通过', '审核未通过'],
				typeList: ['', 'warning', 'warning', 'success', 'info'],
				content: '',
				form: {},
				isCar: true,
				headers: [{
						label: '流程ID',
						key: 'id',
						width: 100,
					},
					{
						label: '名称',
						key: 'flow_type_val'
					},
					{
						label: '类型',
						key: 'flow_id_val'
					},
					{
						label: '当前节点',
						key: 'flow_node_id_val'
					},

					{
						label: '发起人',
						key: 'worker_id_val'
					},
					{
						label: '流程状态',
						key: 'flow_status'
					},
					{
						label: '发起时间',
						key: 'submit_time'
					}
				],
				total: 0,
			}
		},
		mounted() {
			this.getApplyList()
		},
		methods: {
			swipeClick(item) {
				uni.showModal({
					title: '温馨提示',
					content: `确定要${item.options[0].text}吗`,
					success: res => {
						if (res.confirm) {
							this.form = item
							if (this.form.options[0].text === '提交') {
								this.form.flow_status = '1'
								this.confirm()
							} else {
								this.form.flow_status = '0'
								this.confirm()
							}
						}
					}
				})
			},
			switchList() {
				this.isCar = !this.isCar
				if (this.isCar) {
					this.fqForm.page = 1,
						this.fqForm.page_size = 6,
						this.getApplyList();
				} else {
					this.fqForm.page = 1,
						this.fqForm.page_size = 19,
						this.getApplyList();
				}
			},
			changePage(currentPage) {
				this.fqForm.page = currentPage;
				this.getApplyList();
			},
			getApplyList() {
				getApply(this.fqForm).then(res => {
					if (res.data.code === 1) {
						let options = []
						res.data.data.list.forEach(ele => {
							ele.flow_status = Number(ele.flow_status)
							if (ele.flow_status === 0) {
								options = [{
									text: '提交',
									style: {
										backgroundColor: '#3c9cff'
									}
								}]
							} else {
								options = [{
									text: '撤销',
									style: {
										backgroundColor: '#f56c6c'
									}
								}]
							}
							ele.options = options
						})
						this.applyList = res.data.data.list
						this.total = Number(res.data.data.total)
						let obj = {
							headers: this.headers,
							list: this.applyList
						}
						this.$refs['data'].showEdit(obj)
					}
				})
			},
			confirm() {
				updataApply(this.form).then((res) => {
					if (res.data.code === 1) {
						this.getApplyList()
						this.$refs.uToast.show({
							type: 'success',
							icon: false,
							title: '提示',
							message: res.data.msg,
						});
					}
				})
			},
			detail(row) {
				let obj = {
					id: row.id,
					flow_id: row.flow_id,
					flow_node_id: row.flow_node_id,
					model_id: row.model_id,
					code: row.code,
					model_data_id: row.model_data_id
				}
				obj = JSON.stringify(obj)
				uni.navigateTo({
					url: `/pages/manage/applyDetail?data=${obj}`
				});
			}
		}
	}
</script>

<style lang="scss">
	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.myApply {
		height: 100%;
		background-color: #fff;

		.myApplyBox {
			width: 95%;
			margin: 0 auto;
			margin-top: 20rpx;
			border: 1px solid #ebeef5;
			border-radius: 5px;
			background-color: #fff;
			-moz-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

			.u-row {
				padding: 10rpx 20rpx;
				padding-right: 40rpx;

				.name {
					color: #999999;
					font-weight: 700;
					font-size: 30rpx;

				}

				.type,
				.person {
					font-size: 12px;
					color: #999999;

				}

				.time {
					color: #58A3F7;
					font-size: 25rpx;
				}
			}
		}

		.check-view-box {
			position: fixed;
			right: 22rpx;
			bottom: 224rpx;
			z-index: 99;
			opacity: 0.8;

			.roc-btn {
				width: 80rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #fff;
				padding: 0;
				border-radius: 50%;
				background-color: rgb(60, 156, 255);
			}
		}
	}
</style>
